<template>
	<u-popup :show="show" round="20rpx" >
		<view class="card-popup ">
			<view class="header u-rela">
				<view class="text-center fw-600 u-font-32">
					{{ $t('user.选择到账银行卡') }}
				</view>
				<image class="close-btn img-36 u-abso" :src="$staticPath('classify/close.png')" @tap="$emit('close')"></image>
			</view>
			<view class="scroll">
				<scroll-view scroll-y>
					<empty paddingTop="52rpx" marginTop="14rpx" :text="$t('user.暂未添加绑定银行卡')" :icon="$staticPath('default_img.png')" :show="!list.length">
					</empty>
					<view class="card-box u-flex u-flex-between  bg-white u-m-t-20" v-for="(item,index) in list" :key="item.id" @tap="$emit('change',item)">
						<view class="u-flex ">
							<u-image  mode="aspectFill" class="u-m-r-20" width="48rpx" height="48rpx" shape="circle" :src="$fullLink(item.logo)">
								<u-loading-icon slot="loading"></u-loading-icon>
							</u-image>
							<view class="e-flex-1">
								<view class="c-35 u-font-30">{{item.bankname}}</view>
								<text class="c-regular u-font-30">{{$root.bankcode(item.bankcode)}}</text>
							</view>
						</view>
						<radio :color="color" :checked="item.id == cardId"  />
					</view>
				</scroll-view>
				<view class="button-box">
					<u-button size="large" :color="color" shape="circle" :text="$t('user.绑定新银行卡')" @click="$goTo('/pages/user/bankCard/binding',{type:1})"></u-button>
				</view>
				
			</view>
		</view>
	</u-popup>
</template>

<script>
	export default {
		props:{
			show:Boolean,
			list:Array,
			color:String,
			cardId:Number
		}
	}
</script>

<style scoped lang="scss">
	.card-popup {
		height: 610rpx;
		.header {
			height: 90rpx;
			line-height: 90rpx;
			.close-btn {
				top: 26rpx;
				right: 32rpx;
			}
		}
		.scroll {
			border-top: 2rpx solid #e2e2e2;
			scroll-view {
				height: 420rpx;
				.card-box {
					padding: 20rpx 30rpx;
				}
			}
			.button-box{
				padding: 0 30rpx;
				height: 100rpx;
			}
		}
	}
</style>
